<template>
  <div>
    <el-dialog
      center
      title="选择身份"
      :visible="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="cancel()"
      width="611px"
      append-to-body
      :show-close="type == 'choose' ? false : true"
    >
      <div v-loading="loading" style="min-height:200px;max-height: calc(100vh - 300px);overflow: auto;padding: 20px 0;box-sizing: border-box">
        <div
          class="rela flexColCenter option shou"
          :style="{ backgroundColor: roleOption[item.roleKey].color }"
          v-for="(item, index) in rolesList"
          :key="index"
          @click="chooseRole(item)"
        >
          <img :src="roleOption[item.roleKey].img" alt="加载失败" />
          <div>
            <div>{{ item.roleName }}</div>
            <div class="branchName" v-if="item.branchName">
              {{ item.branchName }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList } from "@/api/system/user";
import { setRoleBranchId } from "@/api/login";
import { setToken } from "@/utils/auth";
export default {
  props: {
    open: Boolean,
    roles: Array,
    type: String,
    res: Object,
  },
  data() {
    return {
      loading: false,
      rolesList: [],
      roleOption: {
        teacher: {
          img: require("@/assets/images/role/teacher.png"),
          color: "#FFEBE0",
        },
        schoolAdmin: {
          img: require("@/assets/images/role/schoolAdmin.png"),
          color: "#DBF4DC",
        },
        branchAdmin: {
          img: require("@/assets/images/role/branchAdmin.png"),
          color: "#EAF3FF",
        },
        student: {
          img: require("@/assets/images/role/student.png"),
          color: "#F0EAFB",
        },
        assistant: {
          img: require("@/assets/images/role/assistant.png"),
          color: "#b4abe2",
        },
      },
    };
  },
  watch: {
    async open(e) {
      if (e) {
        if (this.type == "choose") {
          this.rolesList = this.roles;
        } else {
          this.loading = true;
          try {
            this.rolesList = [];
            let res = await getRoleList();
            if (res.code == 200) {
              this.rolesList = res.data.filter((item) => {
                return item.roleKey != "expert";
              });
            }
          } catch (e) {
            console.error(e);
          } finally {
            this.loading = false;
          }
        }
      }
    },
  },
  mounted() {},
  methods: {
    async chooseRole(item) {
      localStorage.setItem("curRole", item.roleKey);
      if (this.type == "choose") {
        setToken(`${this.res.data.access_token}|${this.res.data.userId}`);
        this.$store.dispatch("SET_TOKEN", this.res.data.access_token);
        // this.$router.push({ path: this.redirect || "/" });
        this.$router.push({ path: "/" });
        let res = await setRoleBranchId(item.roleId, item.branchId);
        this.$store.dispatch("GetInfo");
        this.$emit("update:open", false);
      } else {
        let res = await setRoleBranchId(item.roleId, item.branchId);
        this.$store.dispatch("GetInfo");
        this.$emit("update:open", false);
        this.$router.push({ path: "/" });
        setTimeout(() => {
          location.reload();
        }, 600);
      }
    },
    cancel() {
      this.$emit("update:open", false);
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog__header {
  padding: 32px 0 27px 0 !important;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  font-style: normal;
  border-bottom: none;
}
.branchName {
  margin-top: 2px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #006dff;
  line-height: 28px;
  font-style: normal;
}
.option:active {
  border: 2px solid #28b28b;
}
.option {
  box-sizing: border-box;
  padding-left: 168px;
  width: 440px;
  height: 100px;
  border-radius: 8px;
  margin: 0 auto 34px auto;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 28px;
  font-style: normal;
  img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 148px;
    height: 110px;
    object-fit: cover;
  }
}
</style>
